package showcase

import (
	"github.com/templui/templui/internal/components/button"
	"github.com/templui/templui/internal/components/card"
	"github.com/templui/templui/internal/components/form"
	"github.com/templui/templui/internal/components/input"
	"github.com/templui/templui/internal/components/label"
	"github.com/templui/templui/internal/components/selectbox"
	switchcomp "github.com/templui/templui/internal/components/switch"
)

templ ToastPlayground() {
	<div class="w-full max-w-4xl mx-auto p-8">
		<section class="mb-12">
			@card.Card() {
				@card.Content() {
					<form
						class="flex flex-col gap-2"
						hx-post="/docs/toast/demo"
						hx-trigger="submit"
						hx-target="#toast-advanced-container"
					>
						// Message
						@form.Item() {
							@form.Label(form.LabelProps{
								For: "title",
							}) {
								Message
							}
							@input.Input(input.Props{
								Value: "You have a new notification",
								ID:    "title",
								Name:  "title",
							})
						}
						// Description
						@form.Item() {
							@form.Label(form.LabelProps{
								For: "description",
							}) {
								Description
							}
							@input.Input(input.Props{
								Value: "Test Notification",
								ID:    "description",
								Name:  "description",
							})
						}
						// Type
						@form.Item() {
							@form.Label(form.LabelProps{
								For: "type",
							}) {
								Type
							}
							@selectbox.SelectBox() {
								@selectbox.Trigger(selectbox.TriggerProps{
									Name: "type",
									ID:   "type",
								}) {
									@selectbox.Value(selectbox.ValueProps{
										Placeholder: "Default",
									})
								}
								@selectbox.Content() {
									@selectbox.Group() {
										@selectbox.Item(selectbox.ItemProps{
											Value:    "default",
											Selected: true,
										}) {
											Default
										}
										@selectbox.Item(selectbox.ItemProps{
											Value: "success",
										}) {
											Success
										}
										@selectbox.Item(selectbox.ItemProps{
											Value: "error",
										}) {
											Error
										}
										@selectbox.Item(selectbox.ItemProps{
											Value: "warning",
										}) {
											Warning
										}
										@selectbox.Item(selectbox.ItemProps{
											Value: "info",
										}) {
											Info
										}
									}
								}
							}
						}
						// Position
						@form.Item() {
							@form.Label(form.LabelProps{
								For: "position",
							}) {
								Position
							}
							@selectbox.SelectBox() {
								@selectbox.Trigger(selectbox.TriggerProps{
									Name: "position",
									ID:   "position",
								}) {
									@selectbox.Value(selectbox.ValueProps{
										Placeholder: "Bottom Right",
									})
								}
								@selectbox.Content() {
									@selectbox.Group() {
										@selectbox.Item(selectbox.ItemProps{
											Value: "top-right",
										}) {
											Top Right
										}
										@selectbox.Item(selectbox.ItemProps{
											Value: "top-left",
										}) {
											Top Left
										}
										@selectbox.Item(selectbox.ItemProps{
											Value: "top-center",
										}) {
											Top Center
										}
										@selectbox.Item(selectbox.ItemProps{
											Value:    "bottom-right",
											Selected: true,
										}) {
											Bottom Right
										}
										@selectbox.Item(selectbox.ItemProps{
											Value: "bottom-left",
										}) {
											Bottom Left
										}
										@selectbox.Item(selectbox.ItemProps{
											Value: "bottom-center",
										}) {
											Bottom Center
										}
									}
								}
							}
						}
						// Duration
						@form.Item() {
							@form.Label(form.LabelProps{
								For: "duration",
							}) {
								Duration (ms)
							}
							@input.Input(input.Props{
								Type:  input.TypeNumber,
								Value: "3000",
								ID:    "duration",
								Name:  "duration",
							})
						}
						// Options
						@form.Item() {
							@form.Label(form.LabelProps{
								For: "dismissible",
							}) {
								Dismissible
							}
							@form.ItemFlex() {
								@switchcomp.Switch(switchcomp.Props{
									Name:    "dismissible",
									Checked: true,
									ID:      "dismissible",
								})
								@label.Label(label.Props{
									For: "dismissible",
								}) {
									Dimissible
								}
							}
							@form.ItemFlex() {
								@switchcomp.Switch(switchcomp.Props{
									Name:    "icon",
									Checked: true,
								})
								@label.Label(label.Props{
									For: "icon",
								}) {
									Show Icon
								}
							}
							@form.ItemFlex() {
								@switchcomp.Switch(switchcomp.Props{
									ID:      "indicator",
									Name:    "indicator",
									Checked: true,
								})
								@label.Label(label.Props{
									For: "indicator",
								}) {
									Show Indicator
								}
							}
						}
						// Submit
						@button.Button(button.Props{
							Variant: button.VariantOutline,
							Type:    button.TypeSubmit,
							Class:   "w-full",
						}) {
							Show Toast
						}
					</form>
				}
			}
		</section>
		<div id="toast-advanced-container"></div>
	</div>
}
